<template>
  <div class="echarts-map">
    <div id="centerMap"></div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted } from "vue";
  import * as echarts from 'echarts';
  import xyj from '@/assets/otherJson/xyyjhx.json';
  import testData from '@/assets/json/test.json';
  // 利用站点经纬度过滤出坐标数据等
  let pointData = testData.map(item => ({
    value: [item.jd, item.wd],
    label: item.name
  }));
  pointData.push({
    value: [
      118.74,
      32.10
    ],
    label: '长江下游水情中心'
  });
  let linesData = testData.map(item => [
    // 源坐标
    {
      coord: item.source,
    }, 
    // 目的坐标
    {
      coord: [item.jd, item.wd]
    }
  ]);
  // 设立图表dom
  let chartObj: any = null;
  let mapDom: HTMLElement | null = null;
  // 渲染图表
  const renderChart = () => {
    mapDom = document.getElementById("centerMap");
    // 在echarts初始化之前注册地图
    echarts.registerMap('xyj', { geoJSON: xyj });
    chartObj = echarts.init(mapDom);
    chartObj.setOption({
      geo: {
        show: true,
        map: 'xyj',
        roam: false, // 开启鼠标滚轮缩放 ( 如果设置为false, 那么类似鹰眼图的图例也会隐藏 )
        zoom: 1.5, // 地图缩放层级
        scaleLimit: {
          min: 1,
          max: 6
        },
        center: [118.96, 31.37],
        emphasis: {
          focus: 'none' // 高亮当前鼠标悬浮的区域
        },
        overview: {
          show: false
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#36536D',
          shadowOffsetX: -5,
          shadowOffsetY: 10
        }
      },
      series: [
        {
          type: 'map',
          map: 'xyj',
          zoom: 1.5,
          roam: false,
          center: [118.96, 31.37],
          label: {
            show: true,
            color: '#ffffff',
            fontSize: 16
          },
          itemStyle: {
            areaColor: '#4BA2D4',
            borderColor: '#ffffff',
            borderWidth: 2,
          },
          emphasis: {
            itemStyle: {
              areaColor: '#4295c5bd'
            }
          },
          data: [],
        },
        {
          name: '散点图',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          rippleEffect: {
            brusgType: 'stroke'
          },
          itemStyle: {
            color: '#F8B430'
          },
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            backgroundColor: '#409effc2',
            formatter: function(param: any) {
              return param.data.label;
            }
          },
          data: pointData
        },
        {
          name: '飞线图',
          type: 'lines',
          coordinateSystem: 'geo',
          lineStyle: {
            curveness: 0.3,
            color: 'rgba(147, 235, 248, 1)'
          },
          effect: {
            period: 3,
            color: 'rgba(147, 235, 248, 1)',
            show: true,
            symbol: 'arrow',
            symbolSize: 4,
            trailLength: 0.04
          },
          data: linesData
        }
      ]
    });
  }

  // 文档挂载之后进行渲染
  onMounted(() => {
    renderChart();
  }); 
</script>

<style lang="less" scoped>
  .echarts-map {
    box-sizing: border-box;
    padding-top: 50px;
    #centerMap {
      width: 100%;
      height: 530px;
      margin: 0 auto;
    }
  }
</style>